<template>
  <div class="lc_wrap">
    <el-row class="abnormal swaqAbnormal">
      
      <!-- 左侧树 -->
      <el-col :span="leftWidth">
        <div class="box treeBox">
          <basic-container>
            <lcTree @ready="ready" :deviceType='3'></lcTree>
          </basic-container>
        </div>
      </el-col>

      <!-- 内容 -->
      <el-col :span="rightWidth" class="table-wrapper">
        <overlay @changeTreeBox="changeTreeBox"></overlay>
        <basic-container>

          <!--时间选择-->
          <el-form :inline="true" class="demo-form-inline" size="small">

            <!-- 开始时间 -->
            <el-form-item label="">
              <el-date-picker 
                v-model="dateFrom" 
                type="date" 
                size="small" 
                placeholder="开始日期"
                :picker-options="pickerOption" 
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>

            <!-- 联结字 -->
            <el-form-item label="">
              至
            </el-form-item>

            <!-- 结束时间 -->
            <el-date-picker 
              v-model="dateTo" 
              type="date" 
              size="small" 
              placeholder="结束日期" 
              :picker-options="pickerOption"
              value-format="yyyy-MM-dd">
            </el-date-picker>
            &nbsp;&nbsp;

            <!--预警类型选择-->
            <el-form-item label="类型">
              <el-select size="small" v-model="aliasType" style="width: 150px;">
                <el-option 
                  v-for="(item, index) in aliasTypeOption" 
                  :key="index" 
                  :label="item.dictValue"
                  :value="item.dictKey">
                </el-option>
              </el-select>
            </el-form-item>

            <!--状态选择-->
            <el-form-item label="状态">
              <el-select size="small" v-model="statusType" style="width: 150px;">
                <el-option 
                v-for="(item, index) in statusTypeOption" 
                :key="index" 
                :label="item.dictValue"
                :value="item.dictKey">
              </el-option>
              </el-select>
            </el-form-item>
            
						
						<!--当前异常-->
						<el-form-item>
							<el-radio-group v-model="abnormalradio" >
							    <el-radio  label="1">当前异常</el-radio>
							    <el-radio  label="2">全部异常</el-radio>							   
							</el-radio-group>						    
						</el-form-item>	            
             
           
            <!--搜索按钮-->
            <el-form-item label="">
              <el-button 
                type="primary" 
                size="small" 
                icon="el-icon-search" 
                @click="searchBtn">
                搜 索
              </el-button>
            </el-form-item>

            <!--清空按钮-->
            <el-form-item label="">
              <el-button 
                type="" 
                size="small" 
                icon="el-icon-delete" 
                @click="searchReset">
                清 空
              </el-button>
            </el-form-item>

          </el-form>

          <!-- 表格内容 -->
          <avue-crud 
            ref="crud" 
            v-model="form" 
            :option="option" 
            :table-loading="loading" 
            :data="data" 
            :page.sync="page"
            :permission="permissionList" 
            @refresh-change="refreshChange" 
            @search-change="searchChange"
            @selection-change="selectionChange" 
            @current-change="currentChange" 
            @size-change="sizeChange"
            @search-reset="searchReset"
          >
            <!-- 表格左上方 -->
            <template slot="menuLeft">
              <el-button
                type="warning"
                size="small"
                plain
                icon="el-icon-download"
                @click="handleExport">
                导 出
              </el-button>
              <el-button 
                size="small" 
                type="danger" 
                icon="el-icon-edit" 
                :disabled="handleDisabled" 
                @click="toDetails"
                v-if="this.permission.loam_abnormal_batch">
                批量处理
              </el-button>
              <el-button 
                type="primary" 
                size="small" 
                plain 
                @click="sendInfo"
                v-if="this.permission.loam_abnormal_sendInfo">
                发送预警通知
              </el-button>
            </template>

            <!-- 表格内容特殊化 -->
            <template slot="menu" slot-scope="scope">
              <el-link 
                v-if="scope.row.status" 
                type="primary" 
                icon="el-icon-view" 
                style="font-size: 12px"
                :underline="false" 
                @click="viewAbnormal(scope.row)">
                查看
              </el-link>
              <el-link 
                v-else 
                type="danger" 
                icon="el-icon-edit" 
                style="font-size: 12px" 
                :underline="false"
                @click="handleAbnormal(scope.row)">
                处理
              </el-link>
            </template>

          </avue-crud>

          <!-- 弹出框 -->
          <el-dialog 
            title="处理单" 
            :visible.sync="dialogVisiable" 
            :modal="false" 
            @close="beforeDialogClose"
          >
            <el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormRules">
              <el-form-item label="处理意见" prop="conclusion">
                <el-input 
                  type="textarea" 
                  placeholder="请输入处理意见" 
                  show-word-limit 
                  v-model="dialogForm.conclusion"
                  :rows="4" 
                  :resize="false" 
                  :disabled="dialogType=='view'">
                </el-input>
              </el-form-item>
            </el-form>

            <avue-crud 
              ref="handleCrud" 
              :option="handleOption" 
              :table-loading="handleLoading"
              :data="selectionList">
              
							
							<template slot="menu" slot-scope="scope">
								<el-link type="primary"  icon="el-icon-view" style="font-size: 12px" :underline="false" @click="info(scope.row)">
									详情
								</el-link>
							</template>	              
            </avue-crud>

            <div style="display:flex;justify-content:center;" v-if="dialogType=='edit'">
              <el-button 
                size="small" 
                type="primary" 
                @click="onsubmit" 
                :loading="submitLoading">
                提 交
              </el-button>
              <el-button 
                size="small" 
                @click="closeDialog">
                取 消
              </el-button>
            </div>

          </el-dialog>
          
					<el-dialog title="详情" :visible.sync="infoVisiable" :modal="true" :append-to-body="true">						
						<div class="ab_chartsWrap">
							<e-chart  autoresize :options="chartOptions" style="height:92%;"></e-chart>
						</div>						
					</el-dialog>	          

        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import { getToken } from "@/util/auth";
import {getAliasType, getList, update} from "@/api/loam/abnormal";
import {getHistoryData } from "@/api/swaq/abnormal";
import lcTree from "@/components/common/tree.vue";
import overlay from "@/components/common/overlay.vue";
import { system } from "@/components/common/option/system.js";
export default {
  components: {
    lcTree, 
    overlay
  },
  data() {

    return {
    	abnormalradio:'1',
			infoVisiable:false,
			chartOptions:null,
			abnormalInfoId:"",    	
      leftWidth: this.$leftWidth,
      rightWidth: this.$rightWidth,
      form: {},
      query: {},
      loading: false,
      page: {
        pageSize: this.$pageSize,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        dialogClickModal: false,
        selection: true,
        menuWidth: 120,
        column: [{
          label: '区域',
          prop: 'area',
          align: 'center'
        }, {
          label: '企业名称',
          prop: 'deptName',
          align: 'center',
          overHidden: true,
          width: 140
        }, {
          label: '站点',
          prop: 'siteName',
          align: 'center',
          overHidden: true,
          width: 140
        }, {
          label: '机组',
          prop: 'groupName',
          align: 'center',
          overHidden: true,
          width: 140
        }, {
          label: '设备编码',
          prop: 'deviceSn',
          align: 'center'
        }, {
          label: '安装位置',
          prop: 'deviceLocation',
          align: 'center',
          overHidden: true,
          width: 140
        }, {
          label: '监控因子',
          prop: 'alias',
          align: 'center'
        }, {
          label: '预警类型',
          prop: 'alertTypeName',
          align: 'center'
        }, {
          label: '预警阈值',
          prop: 'standardVal',
          align: 'center'
        }, {
          label: '开始时间',
          prop: 'startTime',
          align: 'center',
          width: 160
        }, {
          label: '结束时间',
          prop: 'endTime',
          align: 'center',
          width: 160
        }, {
          label: '持续时间',
          prop: 'duration',
          align: 'center'
        }, {
          label: '处理时间',
          prop: 'handleTime',
          align: 'center',
          width: 160
        }, {
          label: '状态',
          prop: 'status',
          dicData: [{
            label: '已处理',
            value: 1
          }, {
            label: '未处理',
            value: 0
          }],
          align: 'center'
        }]
      },
      data: [],
      pickerOption: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
//    dateFrom: new Date(new Date().getTime() - 86400000 * 6).format('yyyy-MM-dd'),
//    dateTo: new Date().format('yyyy-MM-dd'),
      dateFrom: '',
      dateTo: '',      
      handleDisabled: true,
      dialogVisiable: false,
      handleOption: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        calcHeight: 30,
        tip: false,
        columnBtn: false,
        refreshBtn: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        dialogClickModal: false,
				menu: true,
				menuWidth:100,
        column: [{
          label: '区域',
          prop: 'area',
          align: 'center'
        }, 
        {
          label: '企业名称',
          prop: 'deptName',
          align: 'center'
        },        
        {
          label: '站点',
          prop: 'siteName',
          align: 'center'
        }, {
          label: '机组',
          prop: 'groupName',
          align: 'center',
          width: 180
        }, {
          label: '设备编码',
          prop: 'deviceSn',
          align: 'center'
        }, {
          label: '安装位置',
          prop: 'deviceLocation',
          align: 'center'
        }, {
          label: '监控因子',
          prop: 'alias',
          align: 'center'
        }, {
          label: '预警类型',
          prop: 'alertTypeName',
          align: 'center'
        }, {
          label: '预警阈值',
          prop: 'standardVal',
          align: 'center'
        }, {
          label: '开始时间',
          prop: 'startTime',
          align: 'center'
        }, {
          label: '结束时间',
          prop: 'endTime',
          align: 'center'
        }, {
          label: '持续时间',
          prop: 'duration',
          align: 'center'
        }, {
          label: '处理时间',
          prop: 'handleTime',
          align: 'center'
        }]
      },
      dialogForm: {
        conclusion: null,
      },
      dialogFormRules: {
        conclusion: [{
          required: true,
          message: '请输入处理意见',
          trigger: 'blur'
        }]
      },
      submitLoading: false,
      dialogType: null, // 查看 || 处理
      siteName: '', // 站点下拉绑定值
      siteNameOption: [], // 站点下拉选择项
      aliasType: '', // 预警类型下拉绑定值
      aliasTypeOption: [], // 预警类型下拉选择项
      statusType: '', // 状态下拉绑定值
      statusTypeOption: [], // 状态下拉选择项
      nodeId: null,
      deptInfoName: '',
      deptInfoId: '',
      treeType:null
    };
  },
  computed: {
    ...mapGetters(["permission"]),
		systemInfo() {
			let systemType = localStorage.getItem('systemType');
			let obj = null
			for(var i = 0; i < system.length; i++) {
				if(system[i].systemId == systemType) {
					return system[i];
					break;
				}
			}
		},    
    permissionList() {}
  },
  mounted() {
    this.initData()
  },
  watch: {
    abnormalradio(val){
    	
    	if(val=='1'){
    		this.dateFrom=''
    		this.dateTo=''
    	}else{
	      this.dateFrom= new Date(new Date().getTime() - 86400000 * 30).format('yyyy-MM-dd')
	      this.dateTo=new Date().format('yyyy-MM-dd')  		
    	}
    },
    // 开始时间
    dateFrom() {
      let startDate = new Date(this.dateFrom)
      let endDate = new Date(this.dateTo)
      if (startDate.getTime() > endDate.getTime()) {
        this.dateTo = this.dateFrom
      }
    },

    // 结束时间
    dateTo() {
      let startDate = new Date(this.dateFrom)
      let endDate = new Date(this.dateTo)
      if (startDate.getTime() > endDate.getTime()) {
        this.dateFrom = this.dateTo
      }
    },

    // 弹出框是否可见
    dialogVisiable(val) {
      if (!val) this.selectionClear()
    }

  },
  methods: {
			info(row){
				if(row.type==1){
					this.abnormalInfoId=row.id
					this.getLine()
				}else{
					this.$message.warning('仅限预警类型为超标的才可查看详情')
					return false
				}

			},  	
			getLine() {													
				getHistoryData(this.abnormalInfoId).then(res => {
						this.unit=this.unit=='无量纲'?'':this.unit
						this.chartOptions = {
					        title: {
					          text: ""
					        },
					        tooltip: {
					          trigger: "axis"
					        },
					        xAxis: {
					          boundaryGap: false,
					          data: res.data.data.xarray,
//					          axisLabel:{
//					          	interval:10
//					          }
					        },
					        yAxis: {
								type: 'value',
								axisLabel: {
									color: '#333',
								},
								axisLine: {
									lineStyle: {
										color: '#505b83'
									} // x轴坐标轴颜色
								},
								axisTick: false,
								splitLine: {
									show: true,
									lineStyle: {
										color: '#374062',
										type: 'dashed' //设置背景为虚线
									}
								}						
					        },						
							grid: {
								left: '5%',
								right: '4%',
								bottom: '8%',
								top:'8%',
								containLabel: false
							},
					        visualMap: {
					          show: false,
					          pieces: [
					            {
					              gt: 0,
					              lte: Number(res.data.data.alertValue),
					              color: "green"
					            },
					            {
					              gt: Number(res.data.data.alertValue),
					              color: "red"
					            }
					          ]
					        },
					        series: [
					          {
							    name: '值',
					            type: "line",
					            smooth: true,
					            symbolSize: 0,
					            markLine: {
					              symbolSize: 0.5,
					              lineStyle: {
					                type: "solid",
					                width:2
					              },
					              data: [{
					                  yAxis: res.data.data.alertValue,
					                  lineStyle:{
					                    color:'red',
					                  },
					              }]
					            },
					            data: res.data.data.yarray
					          }
					        ]
						}
						this.infoVisiable=true										
				})									
			},	
    // 左侧树加载事件
    ready(data, treeData) {
    	this.treeType=data.nodeType
      this.nodeId = data.id
      this.deptInfoName = data.title
      this.deptInfoId = data.id
      this.page.currentPage = 1
      this.onLoad()
    },

    // 导出
    handleExport() {
      this.$confirm("是否导出预警数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let start = this.dateFrom;
        let end = this.dateTo;
        let treeId = this.deptInfoId;
        let alertType = this.aliasType;
        let isHandled = this.statusType;
        
        let str=`/api/squirrel-loam/abnormalinfo/export?${this.website.tokenHeader}=${getToken()}&start=${start}&end=${end}&treeId=${treeId}&alertType=${alertType}&isHandled=${isHandled}&treeType=${this.treeType}&queryType=${this.abnormalradio}&st=${this.systemInfo.systemId}`
        window.open(str);
      });
    },

    // 发送预警通知事件
    sendInfo() {
      this.$message.success('发送成功')
    },

    // 自定义搜索清空事件
    searchReset() {
      this.dateFrom = new Date(new Date().getTime() - 86400000 * 6).format('yyyy-MM-dd')
      this.dateTo = new Date().format('yyyy-MM-dd')
      this.aliasType = '';
      this.statusType = '';
			this.query = {};
			this.abnormalradio='1'
      this.onLoad();
    },

    // 切换页面
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad();
    },

    // 更换每页显示数据数量
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad();
    },

    // 点击搜索事件
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },

    // 左侧树收缩、展开
    changeTreeBox() {
      this.leftWidth = this.leftWidth == this.$leftWidth ? 0 : this.$leftWidth
      this.rightWidth = this.rightWidth == this.$rightWidth ? 24 : this.$rightWidth
    },

    // 初始化
    initData() {

      // 预警类型下拉
      getAliasType().then(res => {
        if (res.data.success) {
          this.aliasTypeOption = res.data.data
          this.aliasTypeOption.unshift({
            id: '',
            dictValue: '全部'
          })
        }
      });

      //状态类型下拉 20201019
      this.statusTypeOption = [{
        id: '0',
        'dictKey': '',
        dictValue: '全部'
      }, {
        id: '1',
        'dictKey': '0',
        dictValue: '未处理'
      }, {
        id: '2',
        'dictKey': '1',
        dictValue: '已处理'
      }]
    },

    // 关闭弹框
    closeDialog() {
      this.dialogVisiable = false
      this.submitLoading = false
    },

    // 弹框关闭的回调
    beforeDialogClose() {
      this.$refs.dialogForm.resetFields()
    },
    
    // 预警处理表单提交
    onsubmit() {
      
      // 验证表单
      this.$refs.dialogForm.validate(vaild => {
        if (vaild) {
          this.submitLoading = true
          let ids = this.selectionList.map(item => item.id);
          update({
            ids: ids.join(','),
            conclusion: this.dialogForm.conclusion
          }).then(res => {
            this.submitLoading = false
            if (res.data.success) {
              this.$message.success('操作成功')
              this.dialogVisiable = false
              this.onLoad()
            } else {
              this.$message.success('操作失败')
            }
          })
        }
      })
    },
    
    // 预警批量处理
    toDetails() {
      this.dialogType = 'edit'
      // 筛选数组中的已处理预警
      let handleList = this.selectionList.filter(item => item.status == 1)
      let endTimeNullList = this.selectionList.filter(item => item.endTime == '')
      // 如果存在已处理的预警，提醒用户修改
      if (handleList.length) { 
        this.$message.warning('存在已处理预警')
      } else if(endTimeNullList.length>0){ 
					this.$message.warning('有预警没有结束，不能批量处理')									
				}else{
					this.dialogVisiable = true
				}
    },
    
    // 预警单个处理
    handleAbnormal(row) {
      if(!row.endTime){
    		this.$message.warning('预警没有结束，不能处理')
    		return false
    	}
      this.selectionList = [row]
      this.dialogType = 'edit'
      this.dialogForm.conclusion = null;
      this.dialogVisiable = true
    },
    
    // 预警单个查看
    viewAbnormal(row) {
      this.selectionList = [row]
      this.dialogType = 'view'
      this.dialogForm.conclusion = row.conclusion;
      this.dialogVisiable = true
    },
    
    // 行勾选事件
    selectionChange(list) {
      this.selectionList = list
      this.handleDisabled = this.selectionList.length ? false : true
    },
    
    // 封装清除行勾选的方法
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },

    // 刷新页面
    refreshChange() {
      this.onLoad(this.page, this.query);
    },

    // 点击搜索按钮
    searchBtn() {
      this.page.currentPage = 1
      this.onLoad()
    },

    // 获取表格内容
    onLoad() {
      this.loading = true;
      getList(this.page.currentPage, 
        this.page.pageSize, 
        this.dateFrom, 
        this.dateTo, 
        this.deptInfoId, 
        this.aliasType, 
        this.statusType,
        this.treeType,
        this.abnormalradio,
        this.systemInfo.systemId).then(res => {
        console.log(res.data.data)
        if (res.data.success) {
          res.data.data.records.forEach(item => {
            if (item.duration == '' || item.duration == null) {
              item.duration = '-'
            }
            if (item.standardVal == '' || item.standardVal == null) {
              item.standardVal = '-'
            }
          })
          this.data = res.data.data.records
          this.page.total = res.data.data.total;
          this.selectionClear()
        } else {
          this.$message.error('操作失败')
        }
        this.loading = false
      })
    }
  }
};
</script>

<style lang="scss">
.swaqAbnormal {
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }

  .table-wrapper {
    .el-card__body {
      height: calc(100% - 35px);

      .avue-crud {
        height: calc(100% - 155px);
      }
    }

    .el-table th > .cell {
      white-space: nowrap;
    }

    .el-table__fixed {
      height: calc(100% - 12px) !important;
    }

    .el-table__fixed-right {
      height: calc(100% - 12px) !important;
    }

    .el-table__fixed-right::before,
    .el-table__fixed::before {
      height: 0px;
    }
  }
}
</style>

<style lang="scss" scoped>
.ab_chartsWrap{
	width: 100%;
	height: 300px;
}
.map {
  width: 100%;
  height: 500px;

}

.box {
  height: 100%;
  margin-bottom: 0;
}

.el-row {
  height: calc(100% - 20px);
}

.el-col {
  height: 100%;
  overflow: auto;
}

.search-tools {
  height: 49px;
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 14px;
}

.search-left {
  display: flex;
  height: 33px;
  line-height: 33px;
}

.search-right {
  display: flex;
}

.search-tabs {
  height: 33px;
  display: flex;
  align-items: center;
  margin-right: 40px;
}


</style>